<template>
	<div class="cmt-containter">
		<h3>发表评论</h3>
		<hr />
		<textarea placeholder="请输入评论(你最多吐槽120个字)" v-model="msg"></textarea>
		<mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
		<div class="cmt-list">
			<div class="cmt-box" v-for="(item,index) in cmts" :key="item.time">
				<div class="cmt-title">
					第{{index+1}}楼
					当前用户：{{item.name}}
					发表时间：{{item.time | dateFormat}}
				</div>
				<div class="cmt-comtent">
					{{item.comment==""?"该用户很懒，嘛都没说！":item.comment}}
				</div>
			</div>
		</div>
		<mt-button type="danger" size="large" plain>加载更多</mt-button>
	</div>
</template>

<script>
	import {Toast} from "mint-ui";
	export default {
		data(){
			return {
				cmts:[],
				msg:""
			}
		},
		created(){
			this.getComments();
		},
		methods:{
			getComments(){
				this.$http.get('../../data/newscmts.json').then(function(data){
					var arr = data.body;
					var cmts = arr.filter(item => item.artid==this.id);
					this.cmts = this.cmts.concat(cmts); //使用了数组拼接
				},function(err){
					console.log(err)
					Toast("获取评论失败！")
				})
			},
			postComment(){
				var msg = this.msg;
				if(!msg.trim().length){
					Toast("请输入评论内容！");
					this.msg = "";
					return;
				}
				var comment = {
					name:"杜甫",
					time:Date.now(),
					comment:msg,
					artid:this.id
				}
				this.cmts.unshift(comment);
				this.msg = "";
			}
		},
		props:["id"]
	}
</script>

<style lang="scss" scoped="scoped">
	.cmt-containter{
		h3{
			font-size: 16px;
		}
		textarea{
			margin: 5px 0px;
			height: 100px;
		}
		.cmt-list{
			margin: 5px 0px;
			.cmt-box{
				div{
					line-height: 30px;
				}
				.cmt-title{
					background-color: #ccc;
					font-size: 13px;
					padding-left: 5px; 
				}
				.cmt-comtent{
					text-indent: 2em;
				}
			}
		}
	}
</style>
